<template>
    <!-- 图表容器：设置宽度和高度 -->
    <div ref="chartRef" style=" height: 240px;"></div>
</template>

<script setup>
// 引入 Vue 的 Composition API
import { ref, onMounted, onBeforeUnmount } from 'vue'
// 引入 echarts 库
import * as echarts from 'echarts'
import { getOrderCategory } from '@/apis/admin/order'

// 获取 DOM 元素的引用（用于初始化图表）
const chartRef = ref(null)
// 存储 ECharts 实例
let chartInstance = null

// 获取数据
const fetchData = async () => {
    try {
        const res = await getOrderCategory()
        if (res.success) {
            const chartData = res.data.map(item => ({
                value: item.count,
                name: item.category
            }))
            updateChart(chartData)
        }
    } catch (error) {
        console.error('获取订单分类数据失败:', error)
    }
}

// 更新图表数据
const updateChart = (data) => {
    if (!chartInstance) return
    
    const option = {
        tooltip: {
            trigger: 'item',
            formatter: '{b}: {c} ({d}%)'
        },
        series: [
            {
                name: '订单分类',
                type: 'pie',
                radius: ['40%', '70%'],
                center: ['50%', '50%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: true,
                    formatter: '{b}\n{d}%'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 16,
                        fontWeight: 'bold'
                    }
                },
                data: data
            }
        ]
    }
    
    chartInstance.setOption(option)
}

// 初始化图表
const initChart = () => {
    if (chartRef.value) {
        chartInstance = echarts.init(chartRef.value)
        fetchData()
    }
}

// 窗口大小变化时调整图表尺寸
const resizeChart = () => {
    chartInstance?.resize()
}

// 组件挂载后执行初始化
onMounted(() => {
    initChart()
    // 监听窗口大小变化事件以支持响应式
    window.addEventListener('resize', resizeChart)
})

// 组件卸载前清理资源，防止内存泄漏
onBeforeUnmount(() => {
    window.removeEventListener('resize', resizeChart)
    chartInstance?.dispose() // 销毁 echarts 实例
})
</script>